<template>
  <div class="real_time">
    <!-- 第一行 -->
    <div class="first">
      <div>
      
        <div id="none-container" style="height:300px"></div>
      </div>
      <div>
        <div id="cure-container" style="height:300px"></div>

      </div>
      <div>
        <!-- 确认城市top10 -->
        <div id="city_container" style="height:300px"></div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="second">
      <div id="qz_container" style="height:300px"></div>
    </div>
  </div>
</template>

<script>
export default {
  //现有确诊无症状感染者
  mounted() {
Highcharts.chart('none-container', {
		chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				type: 'pie'
		},
		title: {
				text: '现有确诊，无症状感染者'
		},
		tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
								enabled: true,
								format: '<b>{point.name}</b>: {point.percentage:.1f} %',
								style: {
										color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
								}
						}
				}
		},
		series: [{
				name: 'Brands',
				colorByPoint: true,
				data: [{
						name: 'Chrome',
						y: 61.41,
						sliced: true,
						selected: true
				}, {
						name: 'Internet Explorer',
						y: 11.84
				}, {
						name: 'Firefox',
						y: 10.85
				}, {
						name: 'Edge',
						y: 4.67
				}, {
						name: 'Safari',
						y: 4.18
				}, {
						name: 'Sogou Explorer',
						y: 1.64
				}, {
						name: 'Opera',
						y: 1.6
				}, {
						name: 'QQ',
						y: 1.2
				}, {
						name: 'Other',
						y: 2.61
				}]
		}]
});

    //累计治愈率
    var chart = Highcharts.chart('cure-container',{
	title: {
		text: '累计治愈率'
	},
	xAxis: {
		type: 'logarithmic',
		tickInterval: 1
	},
	yAxis: {
		type: 'logarithmic',
		minorTickInterval: 0.1
	},
	tooltip: {
		headerFormat: '<b>{series.name}</b><br />',
		pointFormat: 'x = {point.x}, y = {point.y}'
	},
	series: [{
		data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
		pointStart: 1
	}]
});
    
    // 全国确诊病例城市top10
    var chart = Highcharts.chart('city_container',{
        chart: {
            type: 'column'
        },
        title: {
            text: '全国确诊病例城市top10'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: [
                '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '降雨量 (mm)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '东京',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    // 全国新增病例
    var chart = Highcharts.chart("qz_container", {
      chart: {
        type: "line",
      },
      title: {
        text: "全国新增确诊病例",
      },
      subtitle: {
        text: "数据来源: WorldClimate.com",
      },
      xAxis: {
        categories: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      },
      yAxis: {
        title: {
          text: "气温 (°C)",
        },
      },
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true,
          },
          // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          enableMouseTracking: false,
        },
      },
      series: [
        {
          name: "东京",
          data: [
            7.0,
            6.9,
            9.5,
            14.5,
            18.4,
            21.5,
            25.2,
            26.5,
            23.3,
            18.3,
            13.9,
            9.6,
          ],
        },
        {
          name: "伦敦",
          data: [
            3.9,
            4.2,
            5.7,
            8.5,
            11.9,
            15.2,
            17.0,
            16.6,
            14.2,
            10.3,
            6.6,
            4.8,
          ],
        },
      ],
    });
  },
};
</script>

<style scoped>
/*  第一行 */
.real_time > .first {
  display: flex;
  text-align: center;
}
.real_time > .first > div {
  flex: 1;
}
/* 第二行 */
.real_time > .second {
  text-align: center;
}
</style>